<template>
  <div class="order-wrapper">
    <el-table ref="multipleTable" v-loading="loading" :data="tableData" border tooltip-effect="dark" style="width: 100%" :default-sort="{prop: 'checkin_at', order: 'descending'}">
      <el-table-column prop="order_no" label="订单编号" width="200" />
      <el-table-column prop="order_name" label="订单名称" width="200" />
      <el-table-column prop="reserve_contact_phone" label="联系电话" width="200" />
      <el-table-column prop="create_at" label="下单时间" width="200" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.create_at ? parseTimeFuc(scope.row.create_at) : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="checkin_at" label="核销时间" width="200" sortable>
        <template slot-scope="scope">
          <div>{{ scope.row.checkin_at ? parseTimeFuc(scope.row.checkin_at) : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="order_no" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDetail(scope)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
import { chargeOffList } from '@/api/order'
import { mapGetters } from 'vuex'
export default {
  name: 'ChargeOffList',
  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      parseTimeFuc: parseTime
    }
  },
  computed: {
    tableData() {
      return this.list.map((item) => {
        item.create_order_at = item.create_order_at ? parseTime(item.create_order_at) : ''
        item.wirte_off_at = item.wirte_off_at ? parseTime(item.wirte_off_at) : ''
        return item
      })
    },
    ...mapGetters(['charge'])
  },
  watch: {
    charge: {
      handler: function(status) {
        if (status) {
          this.initList()
        }
      },
      deep: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 分页
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.initList()
    },
    async initList() {
      this.loading = true
      const { page, limit } = this.listQuery
      const res = await chargeOffList({ page, limit })
      this.loading = false
      const { total, lists } = res.data
      this.total = total
      this.list = lists
      this.$store.dispatch('app/setCharge', false)
    },
    handleDetail(scope) {
      const { order_no, sub_type } = scope.row
      switch (sub_type) {
        case 1:
          this.$router.push({
            path: `/order/hotel/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 2:
          this.$router.push({
            path: `/order/cate/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 3:
          this.$router.push({
            path: `/order/ktv/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 4:
          this.$router.push({
            path: `/order/scenic/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        case 5:
          this.$router.push({
            path: `/order/other/OrderDetail`,
            query: {
              order_no
            }
          })
          break
        default:
          this.$router.push({
            path: `/order/singleOrder/OrderDetail`,
            query: {
              order_no
            }
          })
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-wrapper {
  width: 100%;
}
</style>
